<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue初始化</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>Vue 入门学习 </h2>
        <h2 class="text">  {{msg}} </h2>
        <h2 class="count"  v-once v-on:click="changeCount"> count == {{count }}</h2>
        <h2>{{txt}}</h2>
        <div v-if="flag">
            <div v-bind:data-title="title"  v-bind:data-count="count" >
                {{title}}
            </div>
            <img v-bind:src="imgSrc" style="width:200px;height:200px;" alt="">
        </div>
        <div class="else" v-else    >
            v-else 和 v-if 配合使用 
        </div>
        <button v-on:click="flag=!flag">点击切换 {{flag }}</button>
        <p>
            <input type="text" v-bind:value="msg" v-on:input="change" >
        </p>
        <p>
            <input type="text" v-model="msg">
        </p>
        <p>
        商品单价: <input type="text" v-model="good.price">
        </p>
        <p>
        商品数量 : <input type="text" v-model="good.num">
        </p>
        <p>
            购买总结: {{good.price * good.num}}
        </p>
        <div v-html="tag">
            <!-- {{tag}} -->
        </div>
        <div v-text="tag">

        </div>
    </div>

    <div id="demo">
        <h2>模仿Vue 实现简单的数据绑定 </h2>
        <h1>{{ count }}</h1>
        <h2>msg == {{msg}}</h2>
        <h2>word == {{word  }}</h2>
    </div>

    <script>
        console.log(Vue)
        const vm = new Vue({
            el:"#app",   // document.queryselector('#app')
            data:{
                msg:"work hard for you",
                count:2022,
                txt:"Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统",
                title:"wh2114-daydayup",
                imgSrc:"http://47.104.209.44/base/imgs/1.jpg",
                flag:!!0,
                good:{
                    price:127,
                    num:14
                },
                tag:"<h1>2114-越努力越幸运</h1>"
            },
            methods:{
                changeCount(){
                    this.count = this.count+10
                },
                change(e){
                    console.log(e)
                    this.msg = e.target.value 
                }
            }
        })

        function Demo(options){
            this.options = options;
            this.el = this.options.el;
            this.data = this.options.data 
            this.rootEle = document.querySelectorAll(this.el)[0]
            
            this.init = function(){
                for(var key in this.data){
                    this[key] = this.data[key]
                    this.rootEle.innerHTML = this.rootEle.innerHTML.replace(new RegExp("{{"+" {0,}"+key+" {0,}"+"}}"),this[key])
                }
            }
            this.init()
        }

        const Dm = new Demo({
            el:"#demo",
            data:{
                count:1314,
                msg:"越努力越幸运",
                word:'2114-天道酬勤'
            }
        })
    </script>
    <!-- Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 
    vm  得到的实例化对象  
    el  属性  document.querySelector(el);   说明Vue的作用范围 
    会将app 里面所有的 DOM 渲染 成 虚拟DOM(?)  存储在 内存中 
    data  Vue 需要初始化的数据  最常见的属性    
    {{ }}  最普遍的模板标记标签  双大括号语法  插值表达式  
    核心功能  允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    声明式  直接在 html  书写    a
    编程式  直接在 javascript 书写  location.href   
    
    响应式  reaction  数据被修改之后  页面里面随之跟着里面更新 (vue提供自动响应式系统)
    
    强大的指令功能  v-   代替你进行DOM 操作  Attribute  
    v-bind   绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title  绑定动态的属性 
    静态属性  永远不改变 不是变量
    动态属性  接收是变量  (v-bind)  70%
    v-if/v-show  条件渲染  控制显示隐藏  90% 
    v-on 绑定事件  v-on:click  v-on:change v-on:keydown  100% 
    v-for   循环 循环对象 或数组   90%
    v-model  只能绑定在输入框  实现数据双向绑定 (view 视图 + model 数据模型)   90%  
    当你修改 页面的时候  v-model 自动去更新数据层 
    当你修改 数据的时候  v-model 自动去更新视图层 
    
    v-text   textContent   只接受文本
    v-html   innerHTML     文本和html标签 
    v-once   read-only 
    methods vue 属性  接收方法 
    
    组件化 组件系统是 Vue 的另一个重要概念 
    允许我们使用小型、独立和通常可复用的组件构建大型应用 
    
    封装 类似 Vue 实现数据的双向绑定  双大括号语法 

    -->
</body>
</html>